.input.string .color-picker {
  width: 180px;
}

div.cp-color-picker {
  border: 1px solid $c-darker-grey;
  padding: 10px 10px 0;
  background: $c-lightest-grey;
  overflow: visible;
  border-radius: 3px;

  .cp-alpha {
    margin: 10px 0;
    height: 6px;
    border-radius: 6px;
    overflow: visible;
    border: 1px solid $c-darker-grey;
    box-sizing: border-box;
    background: linear-gradient(to right, rgba($c-lightest-grey, 1) 0%, rgba($c-lightest-grey, 0) 100%);
  }

  .cp-xy-slider {
    border: 1px solid $c-darker-grey;
    margin-bottom: 10px;

    &:active {
      cursor: none;
    }
  }

  .cp-xy-cursor {
    width: 12px;
    height: 12px;
    margin: -6px
  }

  .cp-z-slider {
    margin-left: 10px;
    border: 1px solid $c-darker-grey;
  }

  .cp-z-cursor {
    border-width: 5px;
    margin-top: -5px;
  }

  .cp-alpha-cursor {
    background: $c-lightest-grey;
    border-radius: 100%;
    width: 14px;
    height: 14px;
    margin: -5px -7px;
    border: 1px solid $c-mid-dark-grey !important; // overrides default border
    box-shadow: inset -2px -4px 3px $c-mid-grey;
  }
}

